<template>
  <div>
    <tree
      :data="data"
      :fields="{ label: 'title' }"
      :default-expanded-keys="expandedKeys"
      :lazy-load="loadChildren"
      show-checkbox
      :default-checked-keys="checkedKey"
      @checked="handleChecked"
      selectable
      v-model:selected-keys="selectedKey"
    >
      <template #default="{ node }">
        {{ node[TreeNodeFieldsEnum.LABEL] }}
        ---{{ node[TreeNodeFieldsEnum.KEY] }}
      </template>
    </tree>
    <!-- <el-tree :data="data" :props="{label: 'title'}" :load="loadChildren" lazy></el-tree> -->
    <!-- <gr-tree :data="data" :fields="{ label: 'title' }"></gr-tree> -->
  </div>
  <div>
    <gr-checkbox v-model="checkboxVal" :disable="false" :indeterminate="true"
      >{{ checkboxVal }}***</gr-checkbox
    >
    <gr-checkbox
      v-if="checkboxVal"
      v-model="checkboxVal"
      :disable="false"
      :indeterminate="true"
      >{{ checkboxVal }}</gr-checkbox
    >
  </div>
</template>

<script setup lang="ts">
import tree, {
  TreeNode,
  TreeNodeFieldsEnum
} from '@greaclar-ui/components/tree';
import GrCheckbox from '@greaclar-ui/components/checkbox';
import { Money16Regular } from '@vicons/fluent';
import { ref, watch } from 'vue';
type NodeType = {
  title: string;
  id: string;
  level: number;
  isLeaf?: boolean;
  disabled?: boolean;
  children?: NodeType[];
};
const checkboxVal = ref(false);
function createData(
  level = 1,
  parentKey: string | number = '',
  deep = 3
): NodeType[] {
  const result: NodeType[] = [];
  if (deep === 0) return result;

  for (let i = 0; i <= 5; i++) {
    const id = String(parentKey) + level + i;
    result[i] = {
      title: `${level}级菜单 ${i}`,
      id,
      level,
      isLeaf: deep === 1 && !id.startsWith('122030'), // 122030子节点无限嵌套
      disabled: (level === 1 && i === 0) || id === '1120',
      children: createData(level + 1, id, deep - 1)
    };
  }

  return result;
}

function loadChildren(node: TreeNode): Promise<NodeType[]> {
  return new Promise(res => {
    setTimeout(() => {
      const result = createData(node.level, node.id, 1);
      res(result);
    }, 400);
  });
}

const data = createData();
const selectedKey = ref(['11','12203030']);
const checkedKey = ref(['11','12203032']);
const expandedKeys = ref([]);

watch(selectedKey, () => {
  console.log('selected', selectedKey.value);
});

function handleChecked(keys) {
  console.log(keys);
}
</script>
<style scoped lang="scss"></style>
